<template>
    <div id="numberWallet">
        <section class="wallet-cont">
            <div class="banner container">
                <img src="../../assets/wallet-banner.png" alt="">
                <div class="wallet-title">
                    <h5>区块链-数字资产领域</h5>
                    <p>多元化数字钱包生态解决方案</p>
                </div>
            </div>
        </section>
        <section class="scheme">
            <div class="scheme-title">
                <h5>方案特性</h5>
                <p>Scheme characteristics</p>
            </div>
            <ul class="scheme-list container">
                <li v-for="(item, index) in schemeList" :key="index">
                    <div class="scheme-icon">
                        <img :src="item.iconPath" alt="">
                    </div>
                    <h6>{{item.schemeTitle}}</h6>
                    <div class="p">
                        <p v-for="(p, key) in item.schemeDir" :key="key">{{p}}</p>
                    </div>
                </li>
            </ul>
            <div class="container content-box">
                <div class='box-imgs'>
                    <img src="../../assets/photo-list.png" alt="">
                </div>
                <div class="details">区块链应用于数字资产领域，相比于传统中心化系统，优势在于：资产一旦在区块链上发行，后续流通环节可以不依赖于发行方系统，资产流通由单中心控制变成社会化传播，任何有资源的渠道都可以成为资产流通的催化剂。因此，区块链能极大地提升数字资产流通效率，真正达到“多方发行、自由流通”的效果。</div>
            </div>
        </section>
        <div class="solutions-container">
            <div class="bgimg">
                <div class="solutions-title">
                    <h5>多元化数字钱包生态解决方案</h5>
                    <p>Diversified Digital Wallet Ecological Solutions</p>
                </div>
                <div class="solutions-list container">
                    <ul>
                        <li v-for="(item, index) in solutionsList" :key="index">
                            <div class="icon">
                                <img :src="item.iconPath" alt="">
                            </div>
                            <div class="dir-box">
                                <h5>{{item.title}}</h5>
                                <p>{{item.details}}</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
       <caseSuccess />
    </div>
</template>

<script>
import caseSuccess from '~/components/_CaseSuccess'
    export default {
        name:'numberWallet',
        data () {
            return {
                schemeList:[
                    {
                        iconPath:require('~/assets/scheme1.png'),
                        schemeTitle:'运维托管',
                        schemeDir:['内容服务器支持7x24运维值班，系统安全维护、性能监控']
                    },
                    {
                        iconPath:require('~/assets/scheme2.png'),
                        schemeTitle:'定制化开发',
                        schemeDir:['1位产品、2位开发、1位测试人力专', '职支持（仅限私有化系统）']
                    },
                    {
                        iconPath:require('~/assets/scheme3.png'),
                        schemeTitle:'专职项目经理',
                        schemeDir:['项目全程支持，日常问题答疑，交', '付时对产品功能、技术细节、运维','体系进行免费系统培训，上线后协','助推动系统升级']
                    },
                    {
                        iconPath:require('~/assets/scheme4.png'),
                        schemeTitle:'7x24全天候极速响应',
                        schemeDir:['线上任何问题实时响应，各主链最', '最新动态通知，钱包升级等']
                    }
                ],
                solutionsList:[
                    {
                        iconPath:require('~/assets/phone.png'),
                        title:'钱包+手机挖矿',
                        details:'可提供最新手机挖矿玩法，包括完成多任务提升算力，登录邀请好友送算力等。'
                    },
                    {
                        iconPath:require('~/assets/o2o.png'),
                        title:'钱包+020商城',
                        details:'打造基于区块链的电商生态、积分可通兑、实现信用互评，构建信用共享体系。'
                    },
                    {
                        iconPath:require('~/assets/transfor.png'),
                        title:'钱包+交易行情',
                        details:'支持全球主流交易所的实时价格跟踪，最新全球数字资产行情尽收眼底。'
                    },
                    {
                        iconPath:require('~/assets/money.png'),
                        title:'多币种一体式储存',
                        details:'支持BTC、LTC、ETH、ETC、BCH等多种主流token；支持以太坊ERC20协议格式的所有token'
                    },
                    {
                        iconPath:require('~/assets/api.png'),
                        title:'完善的API接口',
                        details:'提供标准的API，方便其他业务应用调用支付为IOS/Android/H5提供全套支付接口方案'
                    },
                    {
                        iconPath:require('~/assets/duoLan.png'),
                        title:'支持多语言开发',
                        details:'陆续支持中、日、英、韩等主流数字资产市场的多种语言；为打造世界级钱包应用扫清语言障碍'
                    }
                ]
            }
        },
        components:{
            caseSuccess
        }
    }
</script>

<style lang="stylus" scoped>
@import '../../static/styl/mixin.styl';
#numberWallet
    .wallet-cont
        width 100%
        height 697px
        background:linear-gradient(180deg,rgba(0,0,3,1),rgba(5,18,144,1));
        overflow hidden
        position relative
        .banner
            padding-top 70px
            width 100%
            height 95%
        .wallet-title
            positCenter(50%, auto, auto, 50%, -50%, -50%)
            text-align center
            color #fff
            h5
                font-size 52px
                margin-bottom 33px
            p
                font-size 22px
    .scheme
        background-color #fff
        padding-top 100px
        padding-bottom 83px
        .scheme-title
            padding-bottom 55px
            text-align center
            h5
                font-size 42px
                margin-bottom 19px
            p
                font-size 16px
        .scheme-list
            text-align center
            display flex
            justify-content space-between
            li
                width 280px
                height 280px
                border 1px solid #EEEEEE
                background-color #fafafa
                .scheme-icon
                    margin 14px auto 35px
                    width 60px
                    height 68px
                h6
                    font-size 20px
                .p
                    width 224px
                    margin 23px auto 0
                    text-align left
                    p
                        font-size 14px
                        color #666666
                        line-height 24px

        .content-box
            padding-top 50px
            box-sizing border-box
            margin-top 10px
            height 600px
            border 1px solid #EEEEEE
            background-color #FAFAFA
            display flex
            justify-content space-around
            .box-imgs
                width 740px
                height 522px
            .details
                width 264px
                font-size 14px
                color #666
                line-height 30px
    .solutions-container
        height 1004px
        background:linear-gradient(187deg,rgba(15,34,85,1),rgba(42,59,114,1));
        .bgimg
            width 100%
            height 100%
            bgImg('../../assets/solutions_bg.png', cover)
            .solutions-title
                padding-top 106px
                color #fff
                text-align center
                h5
                    font-size 42px
                    margin-bottom 22px
                p
                    font-size 16px
            .solutions-list
                margin-top 61px
                ul
                    display flex
                    justify-content space-between
                    flex-wrap wrap
                    li
                        cursor pointer
                        width 390px
                        height 300px
                        background:rgba(28,28,42,.8);
                        margin-bottom 12px
                        text-align center
                        transition .5s all
                        .icon
                            margin 70px auto 44px
                            width 48px
                            height 48px
                            transition .5s all
                        .dir-box
                            color #fff
                            h5
                                font-size 20px
                                position relative
                                margin-bottom 60px
                            h5::before
                                content ''
                                width 40px
                                height 2px
                                positCenter(auto, auto, -20px, 50%, -50%, 0)
                                background-color #fff
                            p
                                opacity 0
                                transition .5s all
                                width 322px
                                margin 0 auto
                                text-align left
                                line-height 30px
                        &:hover
                            background:linear-gradient(191deg,rgba(38,15,56,1),rgba(62,95,142,1));
                            .icon
                                margin 43px auto 14px
                            p
                                opacity 1
</style>
